<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小笑舒压 - 解压放松每一天</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            color: #333;
        }

        .container {
            max-width: 414px;
            margin: 0 auto;
            background: #fff;
            min-height: 100vh;
            position: relative;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
        }

        /* 顶部欢迎区域 */
        .welcome-section {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 40px 20px 30px;
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        .welcome-section::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="20" cy="20" r="2" fill="rgba(255,255,255,0.1)"/><circle cx="80" cy="40" r="1.5" fill="rgba(255,255,255,0.1)"/><circle cx="40" cy="80" r="1" fill="rgba(255,255,255,0.1)"/></svg>');
            animation: float 20s infinite linear;
        }

        @keyframes float {
            0% {
                transform: translateY(0px) rotate(0deg);
            }

            100% {
                transform: translateY(-100px) rotate(360deg);
            }
        }

        .welcome-title {
            font-size: 28px;
            font-weight: 600;
            margin-bottom: 10px;
            position: relative;
            z-index: 1;
        }

        .welcome-subtitle {
            font-size: 16px;
            opacity: 0.9;
            position: relative;
            z-index: 1;
        }

        .mood-indicator {
            margin-top: 20px;
            position: relative;
            z-index: 1;
        }

        .mood-text {
            font-size: 14px;
            margin-bottom: 10px;
        }

        .mood-emoji {
            font-size: 48px;
            margin: 10px 0;
        }

        /* 主要内容区域 */
        .main-content {
            padding: 20px;
            padding-bottom: 100px;
        }

        .quick-actions {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
            margin-bottom: 30px;
        }

        .action-card {
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
            color: white;
            padding: 20px;
            border-radius: 16px;
            text-align: center;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease;
            cursor: pointer;
        }

        .action-card:nth-child(2) {
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
        }

        .action-card:nth-child(3) {
            background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
        }

        .action-card:nth-child(4) {
            background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
        }

        .action-card:hover {
            transform: translateY(-5px);
        }

        .action-icon {
            font-size: 32px;
            margin-bottom: 10px;
        }

        .action-title {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 5px;
        }

        .action-desc {
            font-size: 12px;
            opacity: 0.9;
        }

        /* 今日推荐 */
        .today-recommend {
            background: #f8f9fa;
            border-radius: 16px;
            padding: 20px;
            margin-bottom: 30px;
        }

        .section-title {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 15px;
            color: #333;
            display: flex;
            align-items: center;
        }

        .section-title i {
            margin-right: 8px;
            color: #667eea;
        }

        .recommend-item {
            background: white;
            border-radius: 12px;
            padding: 15px;
            margin-bottom: 15px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
            display: flex;
            align-items: center;
            cursor: pointer;
            transition: transform 0.2s ease;
        }

        .recommend-item:hover {
            transform: translateX(5px);
        }

        .recommend-icon {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            margin-right: 15px;
            font-size: 18px;
        }

        .recommend-content {
            flex: 1;
        }

        .recommend-title {
            font-size: 16px;
            font-weight: 500;
            margin-bottom: 5px;
            color: #333;
        }

        .recommend-desc {
            font-size: 14px;
            color: #666;
        }

        /* 底部导航 */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 100%;
            max-width: 414px;
            background: white;
            border-top: 1px solid #eee;
            display: flex;
            padding: 10px 0;
            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
        }

        .nav-item {
            flex: 1;
            text-align: center;
            padding: 8px 0;
            cursor: pointer;
            transition: color 0.3s ease;
            color: #999;
        }

        .nav-item.active {
            color: #667eea;
        }

        .nav-item i {
            font-size: 20px;
            margin-bottom: 4px;
            display: block;
        }

        .nav-item span {
            font-size: 12px;
        }

        /* 响应式设计 */
        @media (max-width: 375px) {
            .welcome-title {
                font-size: 24px;
            }

            .quick-actions {
                gap: 12px;
            }

            .action-card {
                padding: 16px;
            }
        }

        /* 动画效果 */
        .fade-in {
            animation: fadeIn 0.8s ease-in;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(20px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .bounce {
            animation: bounce 2s infinite;
        }

        @keyframes bounce {

            0%,
            20%,
            50%,
            80%,
            100% {
                transform: translateY(0);
            }

            40% {
                transform: translateY(-10px);
            }

            60% {
                transform: translateY(-5px);
            }
        }

        /* 心情统计样式 */
        .mood-stats {
            background: #f8f9fa;
            border-radius: 16px;
            padding: 20px;
            margin-bottom: 30px;
        }

        .stats-overview {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 15px;
            margin-bottom: 20px;
        }

        .stats-item {
            text-align: center;
            padding: 15px;
            background: white;
            border-radius: 12px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        }

        .stats-number {
            font-size: 24px;
            font-weight: 700;
            color: #667eea;
            margin-bottom: 5px;
        }

        .stats-label {
            font-size: 12px;
            color: #666;
        }

        .weekly-chart {
            background: white;
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        }

        .chart-bars {
            display: flex;
            justify-content: space-between;
            align-items: end;
            height: 120px;
            margin-top: 20px;
        }

        .chart-bar {
            flex: 1;
            margin: 0 2px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .bar {
            width: 100%;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 4px 4px 0 0;
            transition: all 0.3s ease;
        }

        .bar:hover {
            transform: scaleY(1.1);
        }

        .bar-label {
            margin-top: 8px;
            font-size: 11px;
            color: #666;
            text-align: center;
        }

        /* 心情选择弹框样式 */
        .mood-modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 1000;
        }

        .mood-modal {
            background: white;
            border-radius: 20px;
            padding: 25px;
            max-width: 350px;
            width: 90%;
            text-align: center;
            animation: modalSlideUp 0.3s ease-out;
        }

        @keyframes modalSlideUp {
            from {
                opacity: 0;
                transform: translateY(50px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .mood-modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }

        .mood-modal-header h3 {
            font-size: 18px;
            color: #333;
            margin: 0;
        }

        .close-mood-btn {
            background: none;
            border: none;
            font-size: 20px;
            color: #999;
            cursor: pointer;
            padding: 5px;
            border-radius: 50%;
            transition: all 0.3s ease;
        }

        .close-mood-btn:hover {
            background: #f0f0f0;
            color: #666;
        }

        .mood-options {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
        }

        .mood-option {
            padding: 20px 15px;
            border: 2px solid #f0f0f0;
            border-radius: 16px;
            cursor: pointer;
            transition: all 0.3s ease;
            background: white;
        }

        .mood-option:hover {
            border-color: #667eea;
            background: #f8f9ff;
            transform: translateY(-2px);
        }

        .mood-emoji-large {
            font-size: 32px;
            margin-bottom: 8px;
        }

        .mood-text {
            font-size: 14px;
            color: #333;
            font-weight: 500;
        }

        /* 心理测试类型选择弹框样式 */
        .test-type-options {
            display: grid;
            grid-template-columns: 1fr;
            gap: 15px;
            margin-top: 20px;
        }

        .test-type-option {
            background: #f8f9fa;
            border: 1px solid #eee;
            border-radius: 16px;
            padding: 15px;
            display: flex;
            align-items: center;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .test-type-option:hover {
            background: #f0f7ff;
            border-color: #667eea;
            transform: translateY(-2px);
        }

        .test-type-icon {
            font-size: 32px;
            color: #667eea;
            margin-right: 15px;
            width: 50px;
            text-align: center;
        }

        .test-type-content {
            flex: 1;
        }

        .test-type-title {
            font-size: 16px;
            font-weight: 600;
            color: #333;
            margin-bottom: 5px;
        }

        .test-type-desc {
            font-size: 12px;
            color: #666;
            margin-bottom: 5px;
        }

        .test-type-duration {
            font-size: 11px;
            color: #999;
        }

        /* 测试结果弹框样式 */
        .result-modal {
            max-width: 400px;
            max-height: 80vh;
            overflow-y: auto;
        }

        .result-content {
            text-align: left;
        }

        .result-icon {
            font-size: 48px;
            text-align: center;
            margin-bottom: 15px;
        }

        .result-summary {
            font-size: 16px;
            color: #333;
            margin-bottom: 20px;
            padding: 15px;
            background: #f8f9fa;
            border-radius: 12px;
            border-left: 4px solid #667eea;
        }

        .suggestions-section h4 {
            font-size: 16px;
            color: #333;
            margin-bottom: 12px;
            color: #667eea;
        }

        .suggestions-list {
            list-style: none;
            padding: 0;
            margin-bottom: 20px;
        }

        .suggestions-list li {
            padding: 8px 0;
            border-bottom: 1px solid #f0f0f0;
            position: relative;
            padding-left: 20px;
        }

        .suggestions-list li:before {
            content: '💡';
            position: absolute;
            left: 0;
            top: 8px;
        }

        .suggestions-list li:last-child {
            border-bottom: none;
        }

        .result-tips {
            font-size: 14px;
            color: #666;
            font-style: italic;
            padding: 15px;
            background: #fff3cd;
            border-radius: 12px;
            border-left: 4px solid #ffc107;
        }
    </style>
</head>

<body>
    <div class="container">
        <!-- 顶部欢迎区域 -->
        <section class="welcome-section">
            <h1 class="welcome-title">小笑舒压</h1>
            <p class="welcome-subtitle">解压放松每一天</p>

            <div class="mood-indicator">
                <p class="mood-text">今天的心情如何？</p>
                <div class="mood-emoji bounce">😊</div>
                <p class="mood-text">点击记录今日心情</p>
            </div>
        </section>

        <!-- 主要内容区域 -->
        <section class="main-content">
            <!-- 快速操作 -->
            <div class="quick-actions">
                <div class="action-card fade-in" onclick="showTestTypes()">
                    <div class="action-icon">
                        <i class="fas fa-clipboard-check"></i>
                    </div>
                    <div class="action-title">心理测试</div>
                    <div class="action-desc">多种测试类型选择</div>
                </div>

                <div class="action-card fade-in" onclick="navigateTo('consult')">
                    <div class="action-icon">
                        <i class="fas fa-comments"></i>
                    </div>
                    <div class="action-title">离线咨询</div>
                    <div class="action-desc">心理问题解决方案</div>
                </div>

                <div class="action-card fade-in" onclick="navigateTo('relax')">
                    <div class="action-icon">
                        <i class="fas fa-gamepad"></i>
                    </div>
                    <div class="action-title">放松游戏</div>
                    <div class="action-desc">五子棋等小游戏</div>
                </div>

                <div class="action-card fade-in" onclick="navigateTo('profile')">
                    <div class="action-icon">
                        <i class="fas fa-user-circle"></i>
                    </div>
                    <div class="action-title">个人中心</div>
                    <div class="action-desc">管理个人信息</div>
                </div>
            </div>

            <!-- 今日推荐 -->
            <div class="today-recommend">
                <h3 class="section-title">
                    <i class="fas fa-star"></i>
                    今日推荐
                </h3>

                <div class="recommend-item" onclick="startTest('stress')">
                    <div class="recommend-icon">
                        <i class="fas fa-tachometer-alt"></i>
                    </div>
                    <div class="recommend-content">
                        <div class="recommend-title">压力指数测试</div>
                        <div class="recommend-desc">3分钟快速了解你的压力水平</div>
                    </div>
                </div>

                <div class="recommend-item" onclick="startTest('emotion')">
                    <div class="recommend-icon">
                        <i class="fas fa-heart"></i>
                    </div>
                    <div class="recommend-content">
                        <div class="recommend-title">情绪状态测试</div>
                        <div class="recommend-desc">2分钟分析你的情绪类型</div>
                    </div>
                </div>

                <div class="recommend-item" onclick="navigateTo('relax')">
                    <div class="recommend-icon">
                        <i class="fas fa-chess-board"></i>
                    </div>
                    <div class="recommend-content">
                        <div class="recommend-title">五子棋游戏</div>
                        <div class="recommend-desc">放松心情，锻炼思维</div>
                    </div>
                </div>

                <div class="recommend-item" onclick="navigateTo('consult')">
                    <div class="recommend-icon">
                        <i class="fas fa-heart"></i>
                    </div>
                    <div class="recommend-content">
                        <div class="recommend-title">情绪管理技巧</div>
                        <div class="recommend-desc">学会调节情绪，保持好心情</div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 底部导航 -->
        <nav class="bottom-nav">
            <div class="nav-item active" onclick="showTestTypes()">
                <i class="fas fa-clipboard-check"></i>
                <span>测试</span>
            </div>
            <div class="nav-item" onclick="switchTab('consult')">
                <i class="fas fa-comments"></i>
                <span>咨询</span>
            </div>
            <div class="nav-item" onclick="switchTab('relax')">
                <i class="fas fa-gamepad"></i>
                <span>放松</span>
            </div>
            <div class="nav-item" onclick="switchTab('profile')">
                <i class="fas fa-user"></i>
                <span>我的</span>
            </div>
        </nav>
    </div>

    <!-- 心情选择弹框 -->
    <div class="mood-modal-overlay" id="moodModal">
        <div class="mood-modal">
            <div class="mood-modal-header">
                <h3>今天的心情如何？</h3>
                <button class="close-mood-btn" onclick="closeMoodModal()">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="mood-options">
                <div class="mood-option" onclick="selectMood('😊', 5, '非常开心')">
                    <div class="mood-emoji-large">😊</div>
                    <div class="mood-text">非常开心</div>
                </div>
                <div class="mood-option" onclick="selectMood('😌', 4, '比较开心')">
                    <div class="mood-emoji-large">😌</div>
                    <div class="mood-text">比较开心</div>
                </div>
                <div class="mood-option" onclick="selectMood('😐', 3, '一般般')">
                    <div class="mood-emoji-large">😐</div>
                    <div class="mood-text">一般般</div>
                </div>
                <div class="mood-option" onclick="selectMood('😔', 2, '有点低落')">
                    <div class="mood-emoji-large">😔</div>
                    <div class="mood-text">有点低落</div>
                </div>
                <div class="mood-option" onclick="selectMood('😢', 1, '很难过')">
                    <div class="mood-emoji-large">😢</div>
                    <div class="mood-text">很难过</div>
                </div>
            </div>
        </div>
    </div>

        <!-- 心理测试类型选择弹框 -->
    <div class="mood-modal-overlay" id="testTypesModal">
        <div class="mood-modal">
            <div class="mood-modal-header">
                <h3>选择测试类型</h3>
                <button class="close-mood-btn" onclick="closeTestTypesModal()">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="test-type-options">
                <div class="test-type-option" onclick="startTest('stress')">
                    <div class="test-type-icon">
                        <i class="fas fa-tachometer-alt"></i>
                    </div>
                    <div class="test-type-content">
                        <div class="test-type-title">压力指数测试</div>
                        <div class="test-type-desc">评估当前压力水平，了解压力来源</div>
                        <div class="test-type-duration">约3-5分钟</div>
                    </div>
                </div>
                
                <div class="test-type-option" onclick="startTest('emotion')">
                    <div class="test-type-icon">
                        <i class="fas fa-heart"></i>
                    </div>
                    <div class="test-type-content">
                        <div class="test-type-title">情绪状态测试</div>
                        <div class="test-type-desc">分析情绪类型和强度</div>
                        <div class="test-type-duration">约2-3分钟</div>
                    </div>
                </div>
                
                <div class="test-type-option" onclick="startTest('personality')">
                    <div class="test-type-icon">
                        <i class="fas fa-user-friends"></i>
                    </div>
                    <div class="test-type-content">
                        <div class="test-type-title">性格特征测试</div>
                        <div class="test-type-desc">了解自己的性格优势和特点</div>
                        <div class="test-type-duration">约5-8分钟</div>
                    </div>
                </div>
                
                <div class="test-type-option" onclick="startTest('sleep')">
                    <div class="test-type-icon">
                        <i class="fas fa-bed"></i>
                    </div>
                    <div class="test-type-content">
                        <div class="test-type-title">睡眠质量测试</div>
                        <div class="test-type-desc">评估睡眠质量和改善建议</div>
                        <div class="test-type-duration">约2-3分钟</div>
                    </div>
                </div>
                
                <div class="test-type-option" onclick="startTest('anxiety')">
                    <div class="test-type-icon">
                        <i class="fas fa-brain"></i>
                    </div>
                    <div class="test-type-content">
                        <div class="test-type-title">焦虑程度测试</div>
                        <div class="test-type-desc">检测焦虑症状和严重程度</div>
                        <div class="test-type-duration">约3-4分钟</div>
                    </div>
                </div>
                
                <div class="test-type-option" onclick="startTest('depression')">
                    <div class="test-type-icon">
                        <i class="fas fa-cloud-rain"></i>
                    </div>
                    <div class="test-type-content">
                        <div class="test-type-title">抑郁倾向测试</div>
                        <div class="test-type-desc">评估抑郁风险，及时发现问题</div>
                        <div class="test-type-duration">约4-5分钟</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 切换底部导航
        function switchTab(tabName) {
            // 移除所有active类
            document.querySelectorAll('.nav-item').forEach(item => {
                item.classList.remove('active');
            });

            // 为当前点击的tab添加active类
            event.currentTarget.classList.add('active');

            // 页面切换逻辑
            switch (tabName) {
                case 'test':
                    showTestTypes();
                    break;
                case 'consult':
                    window.location.href = 'consult.html';
                    break;
                case 'relax':
                    // 跳转到放松tab（暂时不处理）
                    console.log('放松功能开发中...');
                    break;
                case 'profile':
                    // 跳转到个人中心tab（暂时不处理）
                    console.log('个人中心功能开发中...');
                    break;
            }
        }

        // 导航到指定页面
        function navigateTo(pageName) {
            console.log('导航到:', pageName);
            // 这里可以添加实际的页面跳转逻辑
            switch (pageName) {
                case 'test':
                    window.location.href = 'test.html';
                    break;
                case 'consult':
                    window.location.href = 'consult.html';
                    break;
                case 'relax':
                    // 跳转到放松tab
                    break;
                case 'profile':
                    // 跳转到个人中心tab
                    break;
            }
        }

        // 心情数据存储
        let moodData = JSON.parse(localStorage.getItem('moodData')) || [];

        // 页面加载完成后的初始化
        document.addEventListener('DOMContentLoaded', function () {
            // 添加页面加载动画
            const cards = document.querySelectorAll('.action-card');
            cards.forEach((card, index) => {
                card.style.animationDelay = `${index * 0.1}s`;
            });

            // 心情点击事件
            const moodEmoji = document.querySelector('.mood-emoji');
            moodEmoji.addEventListener('click', function () {
                showMoodModal();
            });

            // 初始化心情统计（暂时不调用，移到个人中心）
            // updateMoodStats();
            // renderWeeklyChart();
        });

        // 显示心情选择弹框
        function showMoodModal() {
            document.getElementById('moodModal').style.display = 'flex';
        }

        // 关闭心情选择弹框
        function closeMoodModal() {
            document.getElementById('moodModal').style.display = 'none';
        }

        // 选择心情
        function selectMood(emoji, score, text) {
            const today = new Date().toISOString().split('T')[0];

            // 检查今天是否已经记录过心情
            const existingIndex = moodData.findIndex(item => item.date === today);

            if (existingIndex !== -1) {
                // 更新今天的心情
                moodData[existingIndex] = { date: today, emoji, score, text };
            } else {
                // 添加新的心情记录
                moodData.push({ date: today, emoji, score, text });
            }

            // 保存到本地存储
            localStorage.setItem('moodData', JSON.stringify(moodData));

            // 更新显示
            document.querySelector('.mood-emoji').textContent = emoji;
            updateMoodStats();
            renderWeeklyChart();

            // 关闭弹框
            closeMoodModal();

            // 添加动画效果
            const moodEmoji = document.querySelector('.mood-emoji');
            moodEmoji.classList.add('bounce');
            setTimeout(() => {
                moodEmoji.classList.remove('bounce');
            }, 1000);
        }

        // 显示心理测试类型选择弹框
        function showTestTypes() {
            document.getElementById('testTypesModal').style.display = 'flex';
        }

        // 关闭心理测试类型选择弹框
        function closeTestTypesModal() {
            document.getElementById('testTypesModal').style.display = 'none';
        }

        // 开始心理测试
        function startTest(testType) {
            closeTestTypesModal(); // 关闭弹框
            
            // 根据测试类型显示相应的结果和建议
            showTestResult(testType);
        }

        // 显示测试结果和建议
        function showTestResult(testType) {
            let resultData = {};
            
            switch (testType) {
                case 'stress':
                    resultData = {
                        title: '压力指数测试结果',
                        icon: '😰',
                        result: '根据测试结果，你当前的压力水平较高',
                        suggestions: [
                            '深呼吸练习：每天进行5-10分钟的深呼吸，帮助放松身心',
                            '运动释放：进行30分钟的有氧运动，如快走、跑步或游泳',
                            '时间管理：制定合理的时间计划，避免过度紧张',
                            '社交支持：与朋友家人交流，分享你的感受',
                            '冥想放松：尝试冥想或正念练习，每天15-20分钟'
                        ],
                        tips: '记住，适当的压力可以促进成长，但过度的压力需要及时调节。'
                    };
                    break;
                    
                case 'emotion':
                    resultData = {
                        title: '情绪状态测试结果',
                        icon: '💭',
                        result: '你的情绪状态需要关注和调节',
                        suggestions: [
                            '情绪日记：每天记录情绪变化，了解情绪模式',
                            '积极思考：培养积极思维，关注生活中的美好事物',
                            '艺术表达：通过绘画、音乐、写作等方式表达情感',
                            '情绪暂停：情绪激动时，先暂停10秒再行动',
                            '寻求帮助：如果情绪持续低落，考虑寻求专业帮助'
                        ],
                        tips: '情绪是正常的生理反应，学会接纳和调节情绪是心理健康的重要部分。'
                    };
                    break;
                    
                case 'personality':
                    resultData = {
                        title: '性格特征测试结果',
                        icon: '🌟',
                        result: '了解自己的性格特点有助于更好地发展',
                        suggestions: [
                            '优势发挥：发挥你的性格优势，在适合的领域发展',
                            '自我接纳：接纳自己的性格特点，不要强求改变',
                            '沟通技巧：学习与不同性格的人有效沟通',
                            '职业匹配：选择与性格特点匹配的职业方向',
                            '持续成长：在保持本真的基础上，适度调整和成长'
                        ],
                        tips: '每种性格都有其独特的价值和魅力，关键是找到适合自己的发展道路。'
                    };
                    break;
                    
                case 'sleep':
                    resultData = {
                        title: '睡眠质量测试结果',
                        icon: '😴',
                        result: '你的睡眠质量需要改善',
                        suggestions: [
                            '规律作息：保持固定的睡眠和起床时间',
                            '睡前放松：睡前1小时避免使用电子设备',
                            '环境优化：保持卧室安静、黑暗、凉爽',
                            '睡前习惯：建立睡前仪式，如泡澡、阅读',
                            '避免刺激：睡前避免咖啡因、酒精和重餐'
                        ],
                        tips: '良好的睡眠是身心健康的基础，改善睡眠习惯需要时间和耐心。'
                    };
                    break;
                    
                case 'anxiety':
                    resultData = {
                        title: '焦虑程度测试结果',
                        icon: '😰',
                        result: '你存在一定程度的焦虑症状',
                        suggestions: [
                            '渐进放松：学习渐进性肌肉放松技巧',
                            '认知重构：识别和挑战不合理的担忧想法',
                            '正念练习：通过正念冥想减少焦虑',
                            '规律运动：每周进行3-4次有氧运动',
                            '专业咨询：如果焦虑影响生活，寻求心理咨询'
                        ],
                        tips: '适度的焦虑是正常的，但过度的焦虑需要积极应对。'
                    };
                    break;
                    
                case 'depression':
                    resultData = {
                        title: '抑郁倾向测试结果',
                        icon: '☔️',
                        result: '你可能有轻微的抑郁倾向',
                        suggestions: [
                            '保持活动：即使不想动，也要保持日常活动',
                            '社交联系：与朋友家人保持联系，不要孤立自己',
                            '寻求帮助：考虑寻求专业的心理咨询或治疗',
                            '规律作息：保持规律的睡眠和饮食',
                            '积极活动：参与你曾经喜欢的活动'
                        ],
                        tips: '抑郁是可以治疗的，及时寻求帮助是明智的选择。'
                    };
                    break;
                    
                default:
                    resultData = {
                        title: '测试结果',
                        icon: '📊',
                        result: '测试完成',
                        suggestions: ['请根据具体测试结果查看相应建议'],
                        tips: '感谢参与测试！'
                    };
            }
            
            // 显示结果弹框
            showResultModal(resultData);
        }

        // 显示结果弹框
        function showResultModal(resultData) {
            // 创建结果弹框HTML
            const modalHTML = `
                <div class="mood-modal-overlay" id="resultModal" style="display: flex;">
                    <div class="mood-modal result-modal">
                        <div class="mood-modal-header">
                            <h3>${resultData.title}</h3>
                            <button class="close-mood-btn" onclick="closeResultModal()">
                                <i class="fas fa-times"></i>
                            </button>
                        </div>
                        <div class="result-content">
                            <div class="result-icon">${resultData.icon}</div>
                            <div class="result-summary">${resultData.result}</div>
                            <div class="suggestions-section">
                                <h4>改善建议：</h4>
                                <ul class="suggestions-list">
                                    ${resultData.suggestions.map(suggestion => `<li>${suggestion}</li>`).join('')}
                                </ul>
                            </div>
                            <div class="result-tips">${resultData.tips}</div>
                        </div>
                    </div>
                </div>
            `;
            
            // 添加到页面
            document.body.insertAdjacentHTML('beforeend', modalHTML);
        }

        // 关闭结果弹框
        function closeResultModal() {
            const resultModal = document.getElementById('resultModal');
            if (resultModal) {
                resultModal.remove();
            }
        }

        // 更新心情统计
        function updateMoodStats() {
            const today = new Date().toISOString().split('T')[0];
            const weekAgo = new Date(Date.now() - 7 * 24 * 60 * 60 * 1000).toISOString().split('T')[0];

            // 获取最近一周的心情数据
            const weeklyMoods = moodData.filter(item => item.date >= weekAgo);

            // 计算统计信息
            const weeklyMoodCount = weeklyMoods.length;
            const avgMoodScore = weeklyMoodCount > 0 ?
                Math.round(weeklyMoods.reduce((sum, item) => sum + item.score, 0) / weeklyMoodCount * 10) / 10 : 0;
            const bestMoodDay = weeklyMoodCount > 0 ?
                Math.max(...weeklyMoods.map(item => item.score)) : 0;

            // 更新显示
            document.getElementById('weeklyMoodCount').textContent = weeklyMoodCount;
            document.getElementById('avgMoodScore').textContent = avgMoodScore;
            document.getElementById('bestMoodDay').textContent = bestMoodDay;

            // 更新今天的心情显示
            const todayMood = moodData.find(item => item.date === today);
            if (todayMood) {
                document.querySelector('.mood-emoji').textContent = todayMood.emoji;
            }
        }

        // 渲染周心情图表
        function renderWeeklyChart() {
            const chartContainer = document.getElementById('weeklyChart');
            const weekDays = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];

            // 获取最近一周的日期
            const today = new Date();
            const weekDates = [];
            for (let i = 6; i >= 0; i--) {
                const date = new Date(today);
                date.setDate(today.getDate() - i);
                weekDates.push(date.toISOString().split('T')[0]);
            }

            // 生成图表HTML
            let chartHTML = '<div class="chart-bars">';
            weekDates.forEach((date, index) => {
                const mood = moodData.find(item => item.date === date);
                const height = mood ? (mood.score / 5 * 100) : 0;
                const dayLabel = weekDays[index];

                chartHTML += `
                    <div class="chart-bar">
                        <div class="bar" style="height: ${height}%;" title="${mood ? mood.text : '无记录'}"></div>
                        <div class="bar-label">${dayLabel}</div>
                    </div>
                `;
            });
            chartHTML += '</div>';

            chartContainer.innerHTML = chartHTML;
        }
    </script>
</body>

</html>